<!-- 资金账户 -->
<template>
	<view>
		<!-- 余额展示 -->
		<view class="top">
			<view class="yebg _flex_column">
				<text class="yebg-top">余额</text>
				<text class="yebg-bottom">￥ {{balanceNum}}</text>
			</view>
		</view>
		<view class="cu-list menu sm-border _box">
			<view class="cu-item arrow" data-page_name="my_bank_card" @tap="jumpTo">
				<view class="content">
					<text class="menu-name menu-zi ">我的银行卡</text>
				</view>
			</view>
			<view class="cu-item arrow" data-page_name="bill_details" @tap="jumpTo">
				<view class="content">
					<text class="menu-name menu-zi">账单明细</text>
				</view>
			</view>
			<view class="cu-item arrow" data-page_name="cash_withdrawal" @tap="jumpTo">
				<view class="content">
					<text class="menu-name menu-zi">提现</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {userBalance} from '@/api/index.js'
	export default {
		data() {
			return {
				balanceNum: 0.00
				
			}
		},
		onLoad() {
			userBalance({}).then(res=>{
				this.balanceNum = res
				console.log(res)
			})
			
		},
		methods: {
			jumpTo(e) {
				var pageName = e.currentTarget.dataset.page_name;
				//在起始页面跳转到test.vue页面并传递参数
				uni.navigateTo({
					url: pageName
				});
			}
		}
	}
</script>

<style>
	/* @import "../../static/css/capital_account.css"; */
	.top {
		width: 100%;
		height: 240rpx;
		padding: 20rpx 24rpx;
	}
	
	.yebg {
		width: 100%;
		height: 100%;
		background: url(../../static/images/bc-bg1.jpg);
		/* background: url("") no-repeat; */
		background-size: 100% 100%;
		border-radius: 20rpx;
	
		align-items: center;
		justify-content: center;
	}
	
	.yebg .yebg-top {
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		font-size: 24rpx;
		font-family: PingFangSC-regular;
	}
	
	.yebg .yebg-bottom {
	
		margin-top: 6rpx;
		color: rgba(255, 255, 255, 1);
		font-size: 30rpx;
		font-family: PingFangSC-regular;
	}
	
	.menu-zi {
		color: rgba(77, 77, 77, 1);
		font-size: 28rpx;
		font-family: PingFangSC-regular;
	}
	
	.cu-list.menu>.cu-item{
		padding: 0 24rpx;
		margin-bottom: 4rpx;
	}
	
	.cu-list.menu-avatar>.cu-item:after, .cu-list.menu>.cu-item:after{
		border-bottom:none;
	}
	
</style>
